<template>
	<view class="nav-bar" :style="'background:'+navBarBackground+';height: '+height+'px;'">
		<view class="content d-flex align-items-center" :style="'top:'+top+'px;height:'+cHeight+'px;line-height:'+height+'px;width:100%;'">
			<view class="font-size-lg font-weight-bold mr-10">人人约拍</view>
			<view class="sign">
				<button v-if="todayIsSign" class="sign-button d-flex align-items-center has-sign"> <u-icon name='calendar-fill' size="35" class="mr-10"></u-icon>已签到</button>
				<button v-else @tap="sign" class="sign-button d-flex align-items-center no-sign"> <u-icon name='calendar-fill' size="35" class="mr-10"></u-icon>签到</button>
			</view>
		</view>
		
		<!-- 登录popup -->
		<login-popup ref="loginPopup"></login-popup>
	</view>
</template>

<script>
	import {mapState, mapMutations } from 'vuex'
	import loginPopup from "../../components/login-popup/login-popup.vue"
	export default {	
		components: {loginPopup},
		computed:{
			...mapState(['hasLogin','todayIsSign','userInfo']),
			navBarBackground() {
				return '#FFFFFF';
			}
		},
		created() {
			//#ifndef H5
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync();
			// 胶囊按钮位置信息
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.top     = menuButtonInfo.top;
			this.right   = (systemInfo.screenWidth - menuButtonInfo.left)+(systemInfo.screenWidth - menuButtonInfo.right);
			this.cHeight = menuButtonInfo.height;
			this.height  = menuButtonInfo.bottom + 5;
			// #endif
		},
		data() {
			return {
				top:'',
				right:'',
				height:'',
				cHeight:'',
				statusBarHeight:'',
			}
		},
		methods: {
			...mapMutations(['setUserInfo', 'setTodayIsSign']),
			sign() {
				if(!this.hasLogin) {
					this.$refs['loginPopup'].open();return;
				}
				
				uni.showLoading({
					mask: true,
					title: '签到中...'
				});
				
				let userInfo = this.userInfo;
				userInfo.beans = Number(userInfo.beans) + 1;
				this.setUserInfo(userInfo);
				this.setTodayIsSign(true);
				uni.setStorageSync("userInfo",userInfo);
				uni.hideLoading();
			}
		}
	}
</script>

<style lang="scss" scoped>
.nav-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 168;
}
.content {
	position: absolute;
	padding: 0 20rpx;
}
.sign-button {
	font-size: $font-size-extra-sm;
	border-radius: 60rpx;
}
.has-sign {
	color: $text-color-grey !important;
	border: 2rpx solid #ccc !important;
	background-color: $bg-color-white;
}
.no-sign {
	background-color: $color-primary;
}
</style>
